<template>
	<!-- 基本信息 -->
	<form @submit='formSubmit' report-submit='true'>

		<view class='ma-card'>
			<image src='http://aliyun.oss.zxgyzj.com/picture/tab_my/my-card-back.jpg'></image>
		</view>

		<view>
			<view style='background-color:#fff;'>
				<view class='weui-cell'>
					<view class="weui-cell__hd">
						<image class='weui-cell__hd__img' src='../../../static/images/list/my.png'></image>您的尊称
					</view>
					<view class="weui-cell__bd weui-cell__ft">
						<input placeholder='请输入您的姓名' :value="userInfo.name" name='name' id="name" maxlength='10' @input="bindKeyInput">
						</input>
					</view>
				</view>
				<view class='weui-cell'>
					<view class="weui-cell__hd">
						<image class='weui-cell__hd__img' src='../../../static/images/list/tel.png'></image>联系电话
					</view>
					<view class="weui-cell__bd weui-cell__ft">
						<input type='number' placeholder='请输入您的电话号码' name='mobile' id="mobile" :value="userInfo.mobile" maxlength='11'
						 @input="bindKeyInput"></input>
					</view>
				</view>

			</view>
			<view class='word-cell'>
				<view class='weui-cell'>
					<view class="weui-cell__hd">
						<image class='weui-cell__hd__img' src='/static/images/tabbar/order-release-choose.png'></image>工种
					</view>
					<view class="weui-cell__bd"></view>
					<view class="weui-cell__ft dp-flex">
						<view class='border-radius' @tap='mainWorkerPickerChange'>
							{{choosedMainWorkerName ? choosedMainWorkerName : "请选择主工种"}}</view>
						<view class='border-radius' @tap='subWorkerPickerChange'>
							{{choosedSubWorkerName ? choosedSubWorkerName : "请选择次工种"}}</view>
					</view>
				</view>
				<view class='weui-cell'>
					<view class="weui-cell__bd choose-tips fontsize-16 padding56">技能选择：主工种必填，次工种选填。</view>
				</view>
			</view>
			<view class='weui-cellss word-cell'>



				<view class='weui-cell detail-input pd-r-0' @tap='handleDetailLoc'>
					<view class='weui-cell__hd'>
						<image class='weui-cell__hd__img' src='../../../static/images/list/host.png'></image>
						工作居住地
					</view>
					<view class='weui-cell__bd weui-cell__ft '>
						<view class='detail-wrap dp-flex-y-center dp-flex-right'>
							<input placeholder='设定您在城区的位置' disabled='true' class='ellipsis detail-input input-map' placeholder-style='color:#f94c48'
							 :value="detailLoc ? detailLoc : userInfo.address" name='address'></input>
						</view>
					</view>
				</view>

				<view class='weui-cell'>
					<view class="weui-cell__bd choose-tips fontsize-16 padding56">填写后【您的微信头像和电话】将展示在平台内的地图中，方便雇主就近找人，方便您就近接业务。工作居住地变更请及时修改。</view>
				</view>

			</view>
		</view>



		<view class='weui-cells'>
			<view class="weui-cell">
				<view class="weui-cell__bd">
					<view class="weui-cell__bd">
						<view class="weui-uploader">
							<view class="weui-uploader__hd">
								<view class="weui-uploader__title upload-title">
									<image class='weui-cell__hd__img' src='/static/images/info-photo.png'></image>名片头像
								</view>
							</view>
							<view class="weui-uploader__bd">
								<view class="weui-uploader__files " id="uploaderFiles">

									<!-- <view v-if="cropper_src!=''">
										<view class="weui-uploader__file dp-flex-xy-center" @tap="previewImageOne" :id="cropper_src">
											<view style='position: relative;padding-left:56upx;'>
												<image :src="cropper_src" style='width:135upx;height:135upx;'></image>
											</view>
										</view>
									</view>
									<view v-else> -->
									<view class="weui-uploader__file dp-flex-xy-center" @tap="previewImageOne" :id="userInfo.newAvatarUrl">
										<view style='position: relative;padding-left:56upx;'>


											<image v-if='userInfo.newAvatarUrl' class='weui-uploader__img radius15' :src="userInfo.newAvatarUrl"></image>
											<image v-else class='weui-uploader__img radius15' :src="userInfo.avatarUrl|| defaultAvatar"></image>

										</view>
									</view>
									<!-- </view> -->


								</view>
								<view @tap='updataUserAvatar' class='cut-portrait'>更换图片</view>
								<!-- <view @tap='chooseIMG' class='cut-portrait'>更换图片</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>




		<view class='weui-cellss  mar20'>
			<view class='weui-cell'>
				<view class="weui-cell__hd">
					<image class='weui-cell__hd__img' src='http://aliyun.oss.zxgyzj.com/small_img/jiguan.png'></image>籍贯
				</view>
				<view class="weui-cell__bd weui-cell__ft" @tap='onBirthPlace'>
					<text class='cur-place ellipsis' v-if="userInfo.nativeProvince['name']">{{userInfo.nativeProvince['name']}}{{userInfo.nativeCity['name']}}{{userInfo.nativeDistrict['name']}}
					</text>
					<text class='cur-place' v-else>选择您家乡所在城市</text>
				</view>
			</view>

			<view class='weui-cell'>
				<view class="weui-cell__bd choose-tips fontsize-16 padding56">填写后大家可以找到【平台内的同城老乡】</view>
			</view>

		</view>

		<view class='weui-cells mar20'>
			<view class="weui-cell">
				<view class="weui-cell__bd">
					<view class='weui-uploader'>
						<view class='weui-uploader__hd'>
							<image class='weui-cell__hd__img' src='/static/images/jianjie.png'></image>
							<view class='weui-uploader__title upload-title'>
								个人简介
							</view>
						</view>
						<view class='weui-uploader__bd padding56'>
							<textarea class="weui-textarea user-textarea" placeholder="请填写自己的个人简介，丰富的简介和高质量的照片会吸引更多的订单。" name='introduction'
							 :value="userInfo.introduction" @input='textareaInput' bindblur='textareaBlur' maxlength='200' />
							<view class="weui-textarea-counter">{{textArea}}/200</view>
						</textarea>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class='weui-cells mar20'>
			<view class="weui-cell">
				<view class="weui-cell__bd">
					<view class="weui-cell__bd">
						<view class="weui-uploader">
							<view class="weui-uploader__hd">
								<view class="weui-uploader__title upload-title">
									<image class='weui-cell__hd__img' src='/static/images/xc.png'></image>
									个人相册
								</view>
								<view class="weui-uploader__info">{{files.length}}/9</view>
							</view>
							<view class="weui-uploader__bd">
								<view class="weui-uploader__files " id="uploaderFiles">
									<block v-for="(item,index) in files" wx:key big-size="*this">
										<view class="weui-uploader__file dp-flex-xy-center radius15" @tap="previewImage" :id="item">
											<view style='position: relative' class='radius15'>
												<image class="weui-uploader__img radius15" :src="item" mode="aspectFill" />
												<view class="weui-badge" style="position: absolute;top: 0em;right: 0em;" :id="item" :data-index="index"
												 @tap.stop='handleDeletePhoto'>-</view>
											</view>
										</view>
									</block>
								</view>
								<view class="weui-uploader__file dp-flex-xy-center">
									<view class="weui-uploader__input-box radius15" v-if="files.length !=9">
										<view class="weui-uploader__input" @tap="chooseImage"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn-pay-wrap">
			<button open-type='contact' class='btn-pay-service' @tap='kefu'>联系平台客服</button>
			<button form-type='submit' data-issue='true' class="weui-btn btn-pay">发布生成名片</button>
		</view>
	</form>

</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	export default {
		onLoad: function(options) {
			// 订阅事件
			// event.on('afterVIPChange', this, this.afterVIPChange);
			var arr = this.main_getGlobal();

			this.getUserInfo(arr.token, arr.type);
			// 获取工种分类
			// this.getWorkerCategory();
		},
		methods: {
			kefu:function(){
				uni.makePhoneCall({
				  phoneNumber: '13007489696',
				})
			},
			// 获取个人信息
			getUserInfo: function(token, type) {
				console.log('方法进来token', token);
				console.log('方法进来type', type);
				gyzjModel.prototype.getUserInfo(token, type).then(data => {
					switch (data.code) {
						case 1:
							console.log('执行获取信息成功', data);
							//更新用户信息后重新设置全局和缓存用户信息
							app.globalData.userInfo = data.data.user;
							uni.setStorageSync('userInfo',app.globalData.userInfo);
							this.userInfo=app.globalData.userInfo;
							if (data.data.user.secondary) { //有第二工种才更新
								this.choosedSubWorkerName = data.data.user.secondary.name;
							}
							if (data.data.user.workCategory) { //有名称才更新
								this.choosedMainWorkerName = data.data.user.workCategory.name;
							}
							if (data.data.user['poster']) {
								this.files = data.data.user['poster'];
							}
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				})
			},
			 //点击输入框触发事件
			// 表单提交，更新用户信息
			formSubmit: function(e) {
				/*全局身份用户切换身份*/
				let arr=this.main_getGlobal();
				this.main_is_login(arr,'');
				console.log('提交的e的值aa', e);
				let issue = e.detail.target.dataset.issue;
				console.log('issue的值', issue);
				let token = app.globalData.token;
				let postData = e.detail.value;
				postData['native_province_id'] = this.native_province_id || this.userInfo.native_province_id;
				postData['native_city_id'] = this.native_city_id || this.userInfo.native_city_id;
				postData['native_district_id'] = this.native_district_id || this.userInfo.native_district_id;
				postData['province_id'] = this.province_id || this.userInfo.province_id;
				postData['city_id'] = this.city_id || this.userInfo.city_id;
				postData['district_id'] = this.district_id || this.userInfo.district_id;
				postData['latitude'] = this.latitude || this.userInfo.latitude;
				postData['longitude'] = this.longitude || this.userInfo.longitude;

				// 次工种
				if (this.choosedSubWorkerId) {
					postData['secondary_work_category_id'] = this.choosedSubWorkerId || this.userInfo.secondary_work_category_id;
				}
				// 没写完也要保存一次，保存不为空的数据
				let filledData = gyzjModel.prototype.getFilledData(postData);
				console.log('filledData的值', filledData);
				var arr = this.main_getGlobal();
				this.updataUserInfo(arr['token'], filledData, arr['type'], true);

				// if (e.detail.formId) {
				// 	const postData = {
				// 		"formId": e.detail.formId
				// 	}
				// 	saveFormIdF(postData, app.globalData.token);
				// }

				// let flag = this.verifyFormData(postData);
				// if (!flag) {
				// 	util.showMsg();
				// 	return;
				// }

				// this.updataUserInfo(token, postData, false, issue);
			},
			// 更新用户信息,flag表示是否是随时保存
			updataUserInfo: function(token, postData, type, flag, issue) {
				gyzjModel.prototype.updataUserInfo(token, postData, type).then(data => {
					switch (data.code) {
						case 1:
							/*更新的手机号和之前用户手机号不一样*/
							if(data.data!=this.userInfo.mobile){
								app.globalData.mobile=data.data;
								uni.setStorageSync('mobile',app.globalData.mobile);
							}
							var arr=this.main_getGlobal();
							//更新用户信息后，重新定义手机号
							
							// if (issue == 'true') {
								uni.navigateTo({
									url: 'cardcase/cardcase?id=' + this.userInfo.id,
								});
								this.getUserInfo(arr.token,arr.type);
							// }
							// if (!flag) {
							// 	event.emit('afterUserInfoChange');
							// 	if (issue == 'true') {
							// 		uni.navigateTo({
							// 			url: 'cardcase/cardcase?id=' + this.userInfo.id,
							// 		});
							// 	}
							// 	/*执行成功后继续调用*/
							// 	this.getUserInfo(arr.token,arr.type);
							// }
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				});
			},
			// 选择主工种
			mainWorkerPickerChange: function(e) {
				return uni.navigateTo({
					url: '../../vip-info/worker-type/worker-type?cat=主',
				});
			},

			// 选择次工种
			subWorkerPickerChange: function(e) {
				return uni.navigateTo({
					url: '../../vip-info/worker-type/worker-type?cat=次',
				});
			},
			// 选择目前详细居住地
			handleDetailLoc: function(e) {
				uni.chooseLocation({
					success: (res) => {
						// debugger;
						if (res.address) {
							this.detailLoc = res.address;
							this.latitude = res.latitude;
							this.longitude = res.longitude;
						}
					},
					fail: (res) => {}
				})
			},
			// 选择籍贯
			onBirthPlace: function() {
				uni.navigateTo({
					url: '../../city-choose/city-choose?pageType=infoBirth',
				});
			},
			//放大多图的设置
			previewImage: function(e) {
				console.log(e);
				console.log('current是多少' + e.currentTarget.id + 'urls是多少' + this.files);
				uni.previewImage({
					current: e.currentTarget.id, // 当前显示图片的http链接
					urls: this.files // 需要预览的图片http链接列表
				});
			},
			//重新写的单图放大
			previewImageOne: function(e) {
				let imgUrls = new Array(e.currentTarget.id);
				uni.previewImage({
					current: e.currentTarget.id, // 当前显示图片的http链接
					urls: imgUrls // 需要预览的图片http链接列表
				});
			},
			/*上传图片*/
			chooseImage: function(e) {
				let that = this;
				if (this.files.length >= 9) {
					uni.showToast({
						title: '最多添加九张展示图片',
						icon: 'none',
					})
					return;
				}
				uni.chooseImage({
					count: 9 - this.files.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						var arr = that.main_getGlobal();
						let filePaths = res.tempFilePaths;
						let name = 'poster';
						let formData = {
							'submit': 'submit',
						}
						let i = 0;
						this.uploadFile(formData, filePaths, name, i, arr.token, arr.type);
					}
				})
			},
			// 上传图片
			uploadFile: function(formData, filePaths, name, i, token, type) {
				gyzjModel.prototype.uploadDiyPhoto(formData, filePaths, name, i, token, type).then(data => {
					data = JSON.parse(data);
					uni.showLoading({
						title: '上传中...',
					})
					let that=this;
					switch (data.code) {
						case 1:
							//这里不走递归，不然得不到值,递归放到这里来
							i++;
							/*递归完成到最后一张图片之后进行更新用户所有信息*/
							if(i==filePaths.length){
								gyzjModel.prototype.getUserInfo(token,type).then(data => {
									this.userInfo=data.data.user;
									this.files=data.data.user.poster;
							
								});
							}else{
								that.uploadFile(formData, filePaths, name, i, token, type);
							}
							uni.hideLoading();
							break;
						default:
							uni.hideLoading();
							break;
					}
				});
			},
			// 文本域输入监听
			textareaInput: function(e) {
				let value = e.detail.value;
				if (/.*1[0-9]{10}.*/.test(value)) {
					value = this.matchPhoneNum(value);
					uni.showModal({
						title: '温馨提示',
						content: '请勿在个人简介中填写长串数字!',
						showCancel: false,
					})
					e.detail.value = value;
					// return
				}
				if (value.length <= 200) {
					this.textArea = value.length;
				}
				let userInfo = this.userInfo;
				userInfo['introduction'] = value;
				this.userInfo = userInfo;
			},
			// 删除图片
			handleDeletePhoto: function(e) {
				console.log('执行了删除图片', e);
				let picUrl = e.currentTarget.id;
				let index = e.currentTarget.dataset.index;
				console.log('删除的图片', picUrl);
				let postData = {
					"picture": picUrl.slice(picUrl.indexOf('user/') + 5)
				}
				var arr = this.main_getGlobal();
				//执行删除图片函数
				this.deletePhoto(postData, arr.token, arr.type, index);
			},
			//删除图片
			deletePhoto: function(postData, token, type, index) {
				gyzjModel.prototype.deletePhoto(postData, token, type).then(data => {
					switch (data.code) {
						case 1:
							uni.showToast({
								title: '删除成功',
							})
							let files = this.files;
							files.splice(index, 1);
							this.files = files;
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
							break;
					}
				});
			},
			//裁剪图片，用于用户随意更新头像
			chooseIMG(e) {

			},
			//更换头像
			updataUserAvatar: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let token = app.globalData.token;
						let filename = res.tempFilePaths[0];
						let name = 'newAvatarUrl';
						console.log('默认token值' + token);
						console.log('默认filename值' + filename);
						console.log('默认name值' + name);
						var arr=this.main_getGlobal();
						//这里设置type为2
						gyzjModel.prototype.updateAvatar(arr.token,arr.type,filename,name).then(data => {
							data = JSON.parse(data);
							switch (data.code) {
								case 1:
									let userInfo = this.userInfo;
									userInfo['newAvatarUrl'] = filename;
									console.log('code1我的filename' + filename);
									console.log('userInfo' + this.userInfo);
									userInfo['newAvatarUrl'] = filename;
									this.userInfo=userInfo;
									uni.showToast({
										title: '更换成功',
									})
									break;
								default:
									console.log('default我的message' + data.message);
									uni.showToast({
										title: data.message,
										icon: 'none'
									})
									break;
							}
						});
					}
				})
			}
		},
		data() {
			return {
				userInfo: {},
				files: [],
				incomingCat: 1,
				//籍贯相关
				birthIndex: [],
				birthArray: [],
				native_province_id: '',
				native_city_id: '',
				native_district_id: '',

				// 目前居住地相关
				placeIndex: [],
				placeArray: [],
				province_id: '',
				city_id: '',
				district_id: '',

				// 用户位置信息
				latitude: '',
				longitude: '',

				detailLoc: '',
				textArea: 0,

				// 工种相关
				workerTypeArr: [],
				workerSubTypeObj: {},
				// 次工种
				subIndex: [],
				//次工种名字和id
				choosedSubWorkerId: '',
				choosedSubWorkerName: '',
				choosedSubWorkerMoney: '',
				//主工种名字和id
				choosedMainWorkerId: '',
				choosedMainWorkerName: '',
				subAdmissionAmount: '',
				subExperienceAmount: '',

				infoShow: true, //已填隐藏
				//裁剪图片地址
				cropper_src: '',
				cuttype: null,
			}
		},

	}
</script>

<style>
	@import url("../../../static/style/app.css");

	.ma-card {
		width: 100%;
		height: 220upx;
	}

	.ma-card image {
		width: 100%;
		height: 100%;
	}

	.unfold {
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		color: #7d7d7d;
		font-size: 28upx;
		margin-bottom: 20upx;
	}

	.unfold-img {
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;
	}

	.btn-pay-wrap {
		display: flex;
		justify-content: center;
		margin: 10px 15px;
	}

	.btn-pay-service,
	.btn-pay-service-yq {
		width: 49%;
		height: 78upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 2%;
		color: #F94C48;
		border-radius: 5px;
		border: 1px solid #F94C48;
	}

	.btn-pay {
		width: 49%;
		height: 80upx;
		line-height: 80upx;
		background-color: #F94C48;
		color: #fff;
		border-radius: 5px;
		margin-top: 0;
	}

	.weui-cell__hd {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tips {
		width: 100%;
		height: 350upx;
		margin-top: 30upx;
	}

	.tips image {
		width: 100%;
		height: 100%;
	}

	.order-detail-container {
		background-color: #fff;
	}

	.order-detail-wrap {
		margin: 20upx 30upx;
	}

	.order-title {
		position: relative;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 0;
	}

	.order-title::after {
		content: " ";
		position: absolute;
		left: 0;
		right: -30upx;
		height: 1px;
		color: #e5e5e5;
		z-index: 2;
		bottom: 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.order-type {
		font-size: 16px;
	}

	.order-detail-body {
		padding: 20upx 0;
	}

	.order-detail-item {
		display: flex;
		padding-bottom: 20upx;
	}

	.setting-tips {
		color: #f94c48;
		font-size: 28upx;
	}

	radio {
		margin-left: 20upx;
	}

	/* 工种 */
	.border-radius {
		border: 1px solid #f94c48;
		padding: 2upx 20upx;
		margin-left: 20upx;
		background-color: #fff;
		color: #f94c48;
		border-radius: 20px;
		font-size: 14px;
	}

	/* 目前居住地 */
	.detail-picker {
		text-align: right;
		width: 100%;
	}

	.detail-input {
		text-align: right;
	}

	.pd-r-0 {
		padding-right: 0;
	}

	.loc-image {
		width: 50upx;
		height: 50upx;
	}

	.color-333 {
		color: #333;
	}

	.mr-10 {
		margin-right: 10upx;
	}

	/* 删除按钮 */
	.weui-uploader__bd {
		overflow: initial;
	}

	.weui-uploader__file {
		position: relative;
		width: 30%;
	}

	.weui-uploader__input-box {
		margin-right: 0;
		margin-bottom: 0;
	}

	/*图片尺寸修改*/
	.weui-uploader__file>view {
		width: 216upx;
		height: 216upx;
	}

	.weui-uploader__img {
		width: 216upx;
		height: 216upx;
		border: 1px solid #d9d9d9;

	}

	.weui-uploader__files .weui-uploader__file {
		margin-right: 13px;
	}

	.weui-uploader__files .weui-uploader__file:nth-child(3n) {
		margin-right: 0;
	}

	.weui-uploader__bd>.weui-uploader__file {
		margin-right: 0px;
	}

	.weui-uploader__file {
		margin-bottom: 13px;
	}

	.choose-tips {
		color: #666;
		font-size: 24upx;
		flex-wrap: wrap;
		line-height: 1.4;
	}

	.weui-cell__hd__img {
		width: 18px;
		height: 18px;
		margin-right: 10px
	}

	.fontsize-14 {
		font-size: 14px;
	}


	.fontsize-16 {
		font-size: 16px;
	}

	.red-color {
		color: #f94c48;
	}

	.weui-cellss {
		position: relative;
		background-color: #fff;
		line-height: 1.41176471;
		font-size: 17px
	}

	/* 红点 */
	.big-size {
		font-size: 22px;
	}

	.cur-place {
		width: 350upx;
		height: 40upx;
		color: #f94c48;
		padding: 8upx 0upx;
		border-radius: 5px;
		border: 1px solid #f94c48;
		display: block;
		float: right;
		text-align: center;
	}

	.input-map {
		border: 1px solid #f94c48;
		color: #f94c48;
		border-radius: 5px;
		width: 350upx;
		height: 40upx;
		display: block;
		float: right;
		margin-right: 24upx;
		text-align: center;
		padding: 8upx 0upx;
	}

	input::input-placeholder {
		color: #f94c48;
	}

	.dp-flex-right {
		flex-direction: row-reverse;
	}

	.word-cell {
		background-color: #fff;
		margin: 20upx 0;
	}

	.mar20 {
		margin-top: 20upx;
	}

	.user-textarea {
		height: 130upx;
		line-height: 1.4;
	}

	.cut-portrait {
		display: inline;
		padding: 2upx 10upx;
		background-color: #f94c48;
		color: #fff;
		opacity: .5;
		font-size: 28upx;
		position: absolute;
		bottom: 6%;
		left: 13%;
	}

	.radius15 {
		border-radius: 15upx;
	}

	.padding56 {
		padding-left: 50upx;
	}
</style>
